<template>
	<view>
		<view class="expert-info">
			<view class="image">
				<image v-if="arctileObj.image" :src="imgUrl + arctileObj.image" ></image>
				<view class="label" v-if="arctileObj.levelName"><text :class="{level:true}">{{arctileObj.levelName}}</text></view>
			</view>
			<view class="content">
				<view style="display: flex; flex-flow: row nowrap; align-items: center;">
					<text class="name" v-if="arctileObj.name">{{arctileObj.name}}</text>
					<text class="sort" v-if="arctileObj.fieldName">{{arctileObj.fieldName}}</text>
				</view>
				<view class="info" v-if="arctileObj.organization">{{arctileObj.organization}}</view>
			</view>
			<uni-fav style="float: right; margin-left: 30rpx;" :checked="isFav" :circle="true" bg-color="#B4B5B7"
				@click="setFav(isFav)" bg-color-checked="rgba(255, 90, 90, 0.08)" fg-color="#ffffff"
				fg-color-checked="#FF5A5A" />
		</view>
		<view class="expert-details" v-if="arctileObj.description">{{arctileObj.description}}</view>
		<view class="custom-bg-white" style="border-radius: 16px 16px 0 0; padding: 30rpx 30rpx; margin-top: 30rpx;">
			<view class="column-title">
				<text class="column-text">精品课程</text>
				<text class="column-link" @click="goTo('../lectureList/lectureList')">更多 ></text>
			</view>
			<view class="list">
				<uni-row :width="nvueWidth" :gutter="25">
					<uni-col :span="12" v-for="(item,index) in classList" :key="index">
						<view class="list-con" @click="goTo(`../classDetails/${item.type == 1?'classDetails':'video'}?id=${item.id}`)">
							<view class="list-img" v-if="item.image">
								<image class="image" mode="widthFix"
									:src="imgUrl + item.image"></image>
								<text class="img-icon">精品课堂</text>
							</view>
							<view class="list-img" v-else>
								<image class="image" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png" mode="widthFix">
								</image>
								<text class="img-icon">精品课堂</text>
							</view>
							<text class="list-text">{{item.title}}</text>
							<view class="uni-flex list-info">
								<view class="author">
									<image v-if="item.expertImage" :src="imgUrl + item.expertImage"></image>
									<image v-else src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/avatar.png"></image>
									<text>{{item.expertName}}</text>
								</view>
								<view class="see"><uni-icons type="eye" color="#9498A0"
										size="14"></uni-icons><text>{{item.browseNum}}</text></view>
							</view>
						</view>
					<!-- <uni-col :span="12">
						<view class="list-con" @click="goTo('../classDetails/classDetails')">
							<view class="list-img">
								<image class="image" mode="widthFix"
									src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/list.png"></image>

							</view>
							<text class="list-text">渔场规划工艺设计高级综合班</text>
							<view class="uni-flex list-info">
								<view class="author">
									<image
										src="https://staticfile-yj.obs.myhuaweicloud.com/%E5%86%9C%E5%8F%8B%E5%9C%88.png">
									</image><text>李明春</text>
								</view>
								<view class="see"><uni-icons type="eye" color="#9498A0"
										size="14"></uni-icons><text>867</text></view>
							</view>
						</view>
					</uni-col>
					<uni-col :span="12">
						<view class="list-con" @click="goTo('../classDetails/classDetails')">
							<view class="list-img">
								<image class="image" mode="widthFix"
									src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/list2.png"></image>

							</view>
							<text class="list-text">渔场规划工艺设计高级综合班</text>
							<view class="uni-flex list-info">
								<view class="author">
									<image
										src="https://staticfile-yj.obs.myhuaweicloud.com/%E5%86%9C%E5%8F%8B%E5%9C%88.png">
									</image><text>李明春</text>
								</view>
								<view class="see"><uni-icons type="eye" color="#9498A0"
										size="14"></uni-icons><text>867</text></view>
							</view>
						</view>
						<view class="list-con" @click="goTo('../classDetails/classDetails')">
							<view class="list-img">
								<image class="image" mode="widthFix"
									src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/list2.png"></image>

							</view>
							<text class="list-text">渔场规划工艺设计高级综合班</text>
							<view class="uni-flex list-info">
								<view class="author">
									<image mode="widthFix"
										src="https://staticfile-yj.obs.myhuaweicloud.com/%E5%86%9C%E5%8F%8B%E5%9C%88.png">
									</image><text>李明春</text>
								</view>
								<view class="see"><uni-icons type="eye" color="#9498A0"
										size="14"></uni-icons><text>867</text></view>
							</view>
						</view> -->
					</uni-col>
				</uni-row>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseurl,
		appDetailKnowledgeExpert,
		deleteCollection,
		addCollection,
		pageKnowledgeCourse
	} from "@/api/user.js"
	let imgUrl = baseurl + "/nb-as/1.0.1/FileService/previewFile?fileId="
	export default {
		data() {
			return {
				nvueWidth: 730,
				isFav: false,
				parmas: '',
				arctileObj: {
					image:'',
					levelName:'',
					name:'',
					fieldName:'',
					organization:'',
				},
				showLoadMore: false,
				nodes: [],
				imgUrl,
				classList: [],
				page: 1,
				maxpage: 0,
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			this.parmas = option.id;
			this.showLoadMore = true;
			this.appDetailKnowledgeExpert(this.parmas);
			let obj = {
				condition:{
					expertId:option.id
				},
				pageNum:1,
				pageSize:10
			}
			this.pageKnowledgeCourse(obj)
		},
		onPullDownRefresh() {
			this.appDetailKnowledgeExpert(this.parmas);
			let obj = {
				condition:{
					expertId:this.parmas
				},
				pageNum:1,
				pageSize:10
			}
			this.pageKnowledgeCourse(obj)
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			console.log("onReachBottom");
			console.log("page", this.page, this.maxpage)
			if (this.page == this.maxpage) {
				this.showLoadMore = false;
				return
			}
			this.showLoadMore = true;
			this.page++;
			this.pageKnowledgeCourse({ //参数
				"condition": {
					"expertId":this.arctileObj.id
				},
				"pageNum": this.page,
				"pageSize": 10
			});
		},
		methods: {
			async appDetailKnowledgeExpert(options) {
				const res = await appDetailKnowledgeExpert(options);
				this.arctileObj = res.returnObj;
				if (this.arctileObj.myFavorite > 0) {
					this.isFav = true
				} else {
					this.isFav = false
				}
				this.showLoadMore = false;
			},
			
			async pageKnowledgeCourse(options){
				const res = await pageKnowledgeCourse(options)
				this.maxpage = res.returnObj.navigateLastPage;
				this.classList = this.classList.concat(res.returnObj.list);
				this.showLoadMore = false;
			},
			
			async addCollection(options) {
				const res = await addCollection(options);
				if (res.success) {
					uni.showToast({
						title: '收藏成功！'
					})
					this.isFav = true;
				}
			},

			async deleteCollection(options) {
				const res = await deleteCollection(options);
				if (res.success) {
					uni.showToast({
						title: '已取消收藏！'
					})
					this.isFav = false
				}
			},
			setFav() {
				let options = {
					serviceType: '1',
					serviceId: this.arctileObj.id
				}
				if (this.isFav) {
					this.deleteCollection([options])
				} else {
					this.addCollection(options)
				}
				this.$forceUpdate()
			},
			goTo(e) {
				var url = e;
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url("https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/nongke-bg.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.expert-info {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
		padding: 30rpx;
	}

	.image {
		position: relative;
	}

	.image .label {
		position: absolute;
		line-height: 20px;
		text-align: center;
		left: 0;
		bottom: 0;
		right: 0;
	}

	.image .label text {
		font-size: 12px;
		display: inline-block;
		width: 80rpx;
		height: 20px;
		color: #ffffff;
		text-align: center;
	}

	.image image {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	.content {
		flex: 1;
		padding: 0 15px;
	}

	.content .name {
		font-weight: 500;
		font-size: 40rpx;
		line-height: 28px;
	}

	.content .sort {
		padding: 3px 8px;
		background-color: #EBF9FC;
		font-size: 24rpx;
		color: #00B5DD;
		border-radius: 4px;
		margin-left: 10px;
	}

	.content .info {
		font-size: 24rpx;
		color: #646A74;
		margin-top: 5px;
	}

	.expert-details {
		color: #646A74;
		font-weight: 400;
		font-size: 28rpx;
		line-height: 22px;
		padding: 0 30rpx;
	}

	.list {
		padding: 15px 0;
	}

	.list-con {
		width: 100%;
		padding: 0px;
		margin-bottom: 15px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.list-img {
		position: relative;
	}

	.list-img .img-icon {
		position: absolute;
		left: 0;
		top: 0;
		display: inline-block;
		width: 128rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 24rpx;
		text-align: center;
		color: #ffffff;
		background-image: url('https://staticfile-yj.obs.myhuaweicloud.com/tag-1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.list-img .image {
		width: 100%;
		border-radius: 8px 8px 0px 0px;
	}


	.list-text {
		font-size: 28rpx;
		color: #283241;
		line-height: 22px;
		max-height: 44px;
		padding: 0 10rpx;
		overflow: hidden;
		font-weight: bold;
	}
</style>